<template>
    <div >
        <h5>{{listp.topic}}</h5>
        <p>
            <span>发表时间：{{listp.time}}</span>
            <span>点击次数：{{listp.click}}次</span>
        </p>
        <hr>
        <!-- 图片缩略图区域 -->
            <div class='photo'>
                <!-- <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" 
                @click="$preview.open(index, list)" fa-flip-horizontal :key='item.img_url' alt>    -->
               <vue-preview :slides="list" @close="handleClose"></vue-preview>
            </div>  
        <!-- 图片内容区域 -->
        <div class="photo_content" >
           {{listp.describe}}
        </div>
        <!-- 评论子组件，放入一个现成的子组件 -->
        <Comment ></Comment>
    </div>
</template>
<script>
import { Toast } from "mint-ui";
import Comment from '../subcomponents/comment';
export default {
    data () {
        return {
            listp:[0],
            id:this.$route.params.id,
            listImg:[0],
            list:[]
            
        }
    },
    created () {
        this.getAllList();
        this.getsmallImg();
    }
    ,
    methods: {
        // 获取相应的数据
        getAllList(){
           this.$http.get("http://localhost:1000/shareList").then(res=>{
            res.body.forEach(element => {
                if(element.id==this.id){
                    this.listp.splice(0,1,element)[0];
                    this.listp=this.listp[0]; 
                }  
            });                             
        })          
        },
    // 获取缩略图
        getsmallImg(){
             this.$http.get("http://localhost:1000/shareList").then(res=>{
            res.body.forEach(element => {
                if(element.id==this.id){ 
                    this.listImg.splice(0,1,element.imgs);
                    this.listImg=this.listImg[0]
                    //循环图片，补全宽高
                    this.listImg.forEach(item=>{
                        // this.list=[];
                        item.w=600;
                        item.h=400;
                        item.msrc=item.src;                      
                    })
                    this.list=this.listImg;  
                }  
            });                             
        })    
   
        },
        handleClose(){
            console.log(1)
        }
      
    },
    // 注册组件
    components: {
        Comment
    }

}
</script>


<style lang="scss" scoped>
    h5{
        font-size: 14px;
        padding: 5px 16px;
        font-weight: bold;
        color: #26a2ff;
    }
    p{
        display:flex;
        justify-content: space-around;

    }
    .photo_content{
        padding: 10px 5px;
        font-size: 14px;
        line-height: 30px;
    }
    .photo{width: 100%;}
   
</style>
